<template>
  <view class="article-item u-border-bottom" @click="handleClick">
    <view class="article-item-top">
      <view class="top-left" @click.stop="handleAvatarClick">
        <view class="avatar-wrap">
          <image
            class="avatar"
            mode="aspectFill"
            :src="item.personDetail.personPic"
          ></image>
        </view>
        <view class="person-name">
          {{ item.personDetail.personIname }}
        </view>
        <text v-if="item.personDetail.isConsultant" class="icon icon-consultant"></text>
      </view>
      <view class="top-right"> </view>
    </view>
    <view class="article-item-middle">
      <view class="article-title">{{ item.title }}</view>
      <view v-if="item.summary" class="article-summary u-line-2">{{ item.summary }}</view>
      <view v-if="item.thumb">
        <image class="article-img" mode="aspectFill" :src="item.thumb"></image>
      </view>
    </view>
    <view class="article-item-bottom">
      <view class="action-item" @click.stop>
        <button
          :data-title="item.title"
          :data-articleid="item.articleId"
          :data-thumb="item.thumb"
          data-sharetype="1"
          plain
          size="mini"
          class="btn-share"
          open-type="share"
        >
          <text class="icon icon-share"></text>
          <text>分享</text>
        </button>
      </view>
      <view class="action-item">
        <text class="icon icon-eye"></text>
        <text>{{ item.vCnt | countFilter }}</text>
      </view>
      <view class="action-item" @click.stop="handlePraise">
        <!--  isShowAnimation ? 'icon-thumb-animation' : 'icon-thumb-animation-no' -->
        <text v-if="item.isPraise == 1" :class="isShowAnimation ? 'icon-thumb-animation' : 'icon-thumb-animation-no'"></text>
        <text v-else class="icon icon-thumb"></text>
        <text> {{ item.likeCnt > 0 ? (item.likeCnt | countFilter) : "赞" }}</text>
      </view>
      <view v-if="isShowCollectIcon" class="action-item" @click.stop="handleFavorite">
        <text v-if="item.isFavorite == 1" class="icon icon-collect-on"></text>
        <text v-else  class="icon icon-collect"></text>
        <text>收藏</text>
      </view>
      <view v-if="false" class="action-item" @click.stop="handleDelete">
        <text class="icon icon-delete"></text>
      </view>
    </view>
  </view>
</template>

<script>
import { addArticlePraise, addArticleFavorite } from '@/api/modules/career';
export default {
  components:{
  },
  emits: ['showLoginDialog'],
  props: {
    item: {
      type: Object,
      default: function () {
        return {};
      },
    },
    isShowCollectIcon:{
      type:Boolean,
      default:true,
    },
    // 标识内容相关  2-从职业大全那边进入详情页面
    relatedType:{
      type:Number,
      default:0,
    },

    positionId:{
      type:String,
      default:'',
    },

    layerId:{
      type:String,
      default:'',
    },
  },
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || "",
      isloading:false,
      isShowAnimation:false,
      realPositionId:'',
      realLayerId:"",
    };
  },
  watch: {
    item: {
      immediate: true,
      handler: function (nVal, oVal) {
        this.isPraise = nVal.isPraise;
        this.isFavorite = nVal.isFavorite;
        this.likeCnt = nVal.likeCnt;
      },
    },

    layerId:{
      immediate: true,
      deep:true, 
      handler(val) {
        if (val) {
           this.realLayerId = val;
        }
      },
    },
    positionId:{
      immediate: true,
      deep:true, 
      handler(val) {
        if (val) {
           this.realPositionId = val;
        }
      },
    },
  },
  filters: {
    countFilter(val) {
      if(val > 10000) {
        return Math.floor(val/10000) + 'w+';
      }
      return val;
    }
  },
  methods: {
    handleClick() {
      uni.navigateTo({
        url:
          "/pagesSub/career/careerInfo/articleDetail?id="
           + this.item.articleId 
           +"&relatedType="+ this.relatedType
           +'&positionId='+this.realPositionId
           +"&layerId="+ this.realLayerId
           ,
      });
    },
    // 点赞
    handlePraise() {
      if(!this.personId) {
        this.showLoginDialog();
        return;
      };
      if (this.isloading) {
        return;
      }
      this.isloading = true;//防止其他接口正在加载中。。。。
      let type = this.item.isPraise == 1 ? "cancel" : "add";
      const params = {
        person_id: this.personId,
        article_id: this.item.articleId,
        type: type,
      };
      addArticlePraise(params).then((res) => {
        this.isloading = false;
        if (res.code == 200) {
          this.isShowAnimation = type == "add";
          this.item.isPraise = type == "add" ? "1" : "0";
          this.$emit("update", { ...params, operateType: 'praise' });
        }
        uni.showToast({
          title: res.status_desc,
          icon: "none",
          duration: 2000
        });
      });
    },

    // 收藏
    handleFavorite() {
      if(!this.personId) {
        this.showLoginDialog();
        return;
      };
      if (this.isloading) {
        return;
      }
      this.isloading = true;//防止其他接口正在加载中。。。。
      let type = this.item.isFavorite == 1 ? "cancel" : "add";
      const params = {
        person_id: this.personId,
        article_id: this.item.articleId,
        type: type,
      };
      addArticleFavorite(params).then((res) => {
        this.isloading = false;
        if (res.code == 200) {
          this.item.isFavorite = type == "add" ? "1" : "0";
          this.$emit("update", { ...params, operateType: 'favorite' });
        }
        uni.showToast({
          title: res.status_desc,
          icon: "none",
          duration: 2000
        });
      });
    },

    handleAvatarClick() {
      uni.navigateTo({
        url: '/pagesSub/career/consultant/index?id=' + this.item.personDetail.personId,
      })
    },

    handleDelete(e) {
      if(!this.personId) {
        uni.showToast({
          title: "请先登录",
          icon: 'none',
          duration: 2000
        });
        return;
      };
      this.$emit('delete', {item: this.item, detail: e.detail});
    },
    showLoginDialog(){
      console.log("showLoginDialog");
      this.$emit("showLoginDialog","",(res)=>{
        console.log("showLoginDialog back",res);
        this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
      })
    },
  },
};
</script>

<style lang="scss" scoped>

@keyframes searchScale {
  0% {
    transform: scale(1.0,1.0) rotate(0deg);
  }
  21% {
    transform: scale(1.1,1.1) rotate(10deg);
  }
  42% {
    transform: scale(1.2,1.2) rotate(20deg);
  }
  46% {
    transform: scale(1.1,1.1) rotate(10deg);
  }
  100% {
    transform: scale(1.0,1.0) rotate(0deg);
  }
}
.article-item {
  margin: 0 32rpx;
  padding: 32rpx 0 26rpx 0;
  &-top {
    margin-bottom: 24rpx;
    .top-left {
      display: flex;
      align-items: center;

      .avatar-wrap {
        margin-right: 20rpx;
      }
      .avatar {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
      }
    }
    .person-name {
      color: #222;
      font-size: 28rpx;
    }
  }

  &-middle {
    .article-title {
      margin-bottom: 12rpx;
      font-size: 32rpx;
      font-weight: bold;
    }
    .article-summary {
      margin-bottom: 24rpx;
      font-size: 28rpx;
      color: #888;
    }
    .article-img {
      width: auto;
      height: 363rpx;
      margin-bottom: 12rpx;
      border-radius: 10rpx;
    }
  }

  &-bottom {
    display: flex;
    flex-wrap: wrap;
    color: #888888;
    margin: auto 24rpx;
    .action-item {
      flex: 1;
      // margin-right: 42rpx;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      

      &:last-child {
          margin: 0;
          flex: none;

          /* .icon {
            margin: 0;
          } */
      }
      text {
        font-size: 28rpx;
        color: #888888;
      }

      .icon {
        margin-right: 10rpx;
        width: 40rpx;
        height: 40rpx;
      }

      .icon-share {
        background-image: url($img-base + 'career/share.png?v=1');
      }

      .icon-eye {
        width: 44rpx;
        background-image: url($img-base + 'career/eyes.png?v=1');
      }

      .icon-thumb {
        background-image: url($img-base + 'career/thumb.png?v=1');
      }

      .icon-thumb-up {
        background-image: url($img-base + 'career/thumb-up.png?v=1');
      }
      .icon-thumb-animation {
        margin-right: 10rpx;
        width: 40rpx;
        height: 40rpx;
        display: inline-block;
        vertical-align: middle;
        background-size: 100% 100%;
        background-image: url($img-base + 'career/thumb-up.png?v=1');
        animation:searchScale 0.8s ;
        
      }
      .icon-thumb-animation-no {
        margin-right: 10rpx;
        width: 40rpx;
        height: 40rpx;
        display: inline-block;
        vertical-align: middle;
        background-size: 100% 100%;
        background-image: url($img-base + 'career/thumb-up.png?v=1');
      }
      .icon-collect-on {
        background-image: url($img-base + 'career/collect_on.png?v=1');
      }

      .icon-collect {
        background-image: url($img-base + 'career/collect.png?v=1');
      }

      .icon-delete {
        background-image: url($img-base + 'career/delete.png?v=1');
      }
    }
  }
}

.btn-share {
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
}
.icon-consultant {
  width: 54rpx;
  height: 46rpx;
  background-image: url($img-base + 'career/consultant.png');
}
</style>